<template>
  <div class="case-detail">
    <div class="main">
      <h3 class="wow" style="visibility: visible">公园壹号</h3>
      <div class="text wow" style="visibility: visible">
        <div class="topLeft">
          <div>
            <div class="item1">
              <p><i></i> <span>面积</span></p>
              <p>100-140㎡</p>
            </div>
            <div class="item2">
              <p><i></i> <span>户型</span></p>
              <p>四室两厅</p>
            </div>
            <div class="item3">
              <p><i></i> <span>地址</span></p>
              <p>四川省绵阳市</p>
            </div>
          </div>
        </div>
        <div class="topRight">
          <div>
            <img src="/src/assets/img/xin.png" alt="" />
          </div>
          <p>
            <span>317</span>
            人喜欢
          </p>
        </div>
      </div>
      <div class="imgBox">
        <img
          :src="item"
          alt=""
          class="wow"
          style="visibility: visible"
          v-for="(item,index) in List"
          :key="index"
        />
        <div class="imgBox2 wow" style="visibility: visible">
          <img
            :src="last"
            alt=""
            class=""
          />
          <img src="/src/assets/img/bg_b2_part2_mask.png" alt="" class="" />
          <div class="button-wrap">
            <div class="btn" @click="gengduo()">展开更多</div>
          </div>
        </div>
      </div>
      <div class="line wow" style="visibility: visible"></div>
      <div class="info">
        <div class="top wow" style="visibility: visible">
          <div>
            <div class="img">
              <img
              src="/src/assets/img/touxiang.png"
                alt=""
              />
            </div>
            <div>
              <p>刘品言</p>
              <p>设计总监</p>
            </div>
          </div>
          <div>
            <span data-v-c3ec5b76="">15</span>
            <p>从业年限</p>
          </div>
        </div>
        <div class="bottom wow" style="visibility: visible">
          <div class="button-wrap">
            <div class="btn" @click="visible = true">找TA设计</div>
          </div>
          <div class="button-wrap">
            <div class="btn" @click="toPage('designdetail',1)">更多作品</div>
          </div>
        </div>
      </div>
    </div>
    <div class="else">
      <h4 class="wow" style="visibility: visible">为您推荐其他筑梦案例</h4>
      <div class="cases wow" style="visibility: visible">
        <ul>
          <li>
            <div class="imgBox">
              <img
                src="https://www.shbotao.net//uploads/thumb/567_345/5291624c46f7524b691bc219bef4e06f.jpeg"
                alt=""
              />
            </div>
            <div class="content">
              <div class="top">
                <div class="topLeft">
                  <p>虹桥正荣府</p>
                </div>
                <div class="topRight">
                  <div class="love">
                    <img src="/src/assets/img/xin.png" alt="" class="img img2" />
                  </div>
                  <p class="pActive">
                    <span>272</span>
                    人喜欢
                  </p>
                </div>
              </div>
              <div class="concate">
                <p class="item1">
                  <i></i>
                  100-140㎡
                </p>
                <p class="item2">
                  <i></i>
                  四室两厅
                </p>
                <p class="item3">
                  <i></i>
                  四川省绵阳市
                </p>
              </div>
              <div class="bottom">
                <div class="bottomLeft">
                  <div class="imgBox2">
                    <img src="/src/assets/img/touxiang.png" alt="" />
                  </div>
                  <div class="text">
                    <p>何倩</p>
                    <p>设计总监</p>
                  </div>
                </div>
                <div class="button-wrap">
                  <div class="btn" @click="toPage('designdetail',1)">查看案例</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="more wow" style="visibility: visible">
        <i></i>
        还想看看这类风格的其他案例？
      </div>
    </div>
    <YueYu :visible="visible" @close-event = "closeDialog" />
  </div>
</template>
  <script setup>
import WOW from 'wow.js'
import { onMounted, ref } from 'vue'
import YueYu from '../../components/common/YueYu.vue'

const visible = ref(false)
const closeDialog = (e)=>{
  visible.value = e
}
import { useRoute,useRouter } from 'vue-router'
const route = useRoute()
console.log(route.query.id)
onMounted(() => {
  new WOW().init()
})
let post = {
    last:'https://www.shbotao.net//uploads/allimg/20230127/e8ae6254ea493ef8aef513c9e08daf24_water.jpg',
    list:[
    'https://www.shbotao.net//uploads/allimg/20230127/0a97b393269c2e8db0ac39a5349666ad_water.jpg',
    'https://www.shbotao.net//uploads/allimg/20230127/6fb810af124fa2eb6c8225d6644c8e9f_water.jpg',
    'https://www.shbotao.net//uploads/allimg/20230127/e8ae6254ea493ef8aef513c9e08daf24_water.jpg',
]
}

const last = ref(post.last  );
const List = ref(post.list)

const gengduo = ()=>{
    console.log(post.list)
    List.value.push(...post.list)
    last.value = post.last
}
const router = useRouter()
const toPage = (page,id)=>{
  let data = {
    name:page,
  }
  if(id){
    data.query = {id:id}
  }
  router.push(data).then(()=>{
    window.scrollTo({
      top:0
    })
  })
}
</script>
  <style>
.case-detail .else .more,
.case-detail .else h4,
.case-detail .info .bottom,
.case-detail .info .top,
.case-detail .line,
.case-detail .text,
.case-detail h3 {
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.case-detail .imgBox .imgBox2,
.case-detail .imgBox img {
  opacity: 0;
  animation: fade-in 3s;
  animation-fill-mode: forwards;
}

.case-detail {
  background-color: #fff;
}

.case-detail .main {
  padding: 0 0.3rem;
}

.case-detail .main > h3 {
  font-size: 0.56rem;
  color: #000;
  font-weight: 700;
  padding-top: 2.1rem;
  line-height: 0.55rem;
}

.case-detail .main > .text {
  display: flex;
  justify-content: space-between;
  margin-top: 0.36rem;
}

.case-detail .main > .text .topLeft > div {
  display: flex;
  width: 4.52rem;
}

.case-detail .main > .text .topLeft > div > div {
  margin-right: 0.4rem;
}

.case-detail .main > .text .topLeft > div > div:last-child {
  margin-right: 0;
}

.case-detail .main > .text .topLeft > div > div i {
  width: 0.3rem;
  height: 0.3rem;
  display: inline-block;
  margin-right: 0.19rem;
  background-size: 100% 100% !important;
}

.case-detail .main > .text .topLeft > div > div p {
  font-size: 0.3rem;
  color: #000;
  display: flex;
  align-items: center;
}

.case-detail .main > .text .topLeft > div > div p span {
  font-size: 0.24rem;
  color: #999;
}

.case-detail .main > .text .topLeft > div > div p:first-of-type {
  margin-bottom: 0.15rem;
}

.case-detail .main > .text .topLeft > div > div.item1 i {
  background: url(/src/assets/img/pingfang.png) no-repeat;
}

.case-detail .main > .text .topLeft > div > div.item2 i {
  background: url(/src/assets/img/taoshu.png) no-repeat;
}

.case-detail .main > .text .topLeft > div > div.item3 i {
  background: url(/src/assets/img/address.png) no-repeat;
}

.case-detail .main > .text .topRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -0.19rem;
}

.case-detail .main > .text .topRight div {
  position: relative;
  width: 0.54rem;
  height: 0.54rem;
  background: #f5f5f5;
  border-radius: 50%;
}

.case-detail .main > .text .topRight div img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.case-detail .main > .text .topRight p {
  font-size: 0.22rem;
  color: #333;
  margin-top: 0.15rem;
}

.case-detail .main > .text .topRight p span {
  font-family: Gilroy;
}

.case-detail .main .imgBox {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
}

.case-detail .main .imgBox img {
  width: 6.9rem;
  height: 4.94rem;
  border-radius: 0.2rem;
  margin-bottom: 0.4rem;
}

.case-detail .main .imgBox .imgBox2 {
  position: relative;
  width: 6.9rem;
  height: 4.94rem;
  margin-bottom: 0.4rem;
}

.case-detail .main .imgBox .imgBox2 img {
  margin-bottom: 0;
}

.case-detail .main .imgBox .imgBox2 img:nth-of-type(2) {
  position: absolute;
  bottom: 0;
  left: 0;
}

.case-detail .main .imgBox .imgBox2 .button-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.case-detail .main .line {
  width: 100%;
  height: 0.02rem;
  background: #e7e7e7;
  margin-top: 0.36rem;
  margin-bottom: 0.5rem;
}

.case-detail .main .info .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-detail .main .info .top > div:first-of-type {
  display: flex;
  align-items: center;
}

.case-detail .main .info .top > div:nth-of-type(2) {
  margin-right: 0.34rem;
  text-align: center;
}

.case-detail .main .info .top > div:nth-of-type(2) span {
  font-size: 1.03rem;
  font-family: Gilroy-Medium;
  color: #dd292c;
  line-height: 0.72rem;
}

.case-detail .main .info .top > div:nth-of-type(2) > p {
  font-size: 0.24rem;
  color: #000;
  margin-top: 0.1rem;
}

.case-detail .main .info .top > div > div p:first-of-type {
  font-size: 0.48rem;
  color: #000;
  line-height: 0.3rem;
  margin-bottom: 0.2rem;
  font-weight: 700;
}

.case-detail .main .info .top > div > div p:nth-of-type(2) {
  font-size: 0.28rem;
  color: #dd292c;
}

.case-detail .main .info .top > div .img {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.56rem;
}

.case-detail .main .info .bottom {
  display: flex;
  margin-top: 0.54rem;
  margin-bottom: 1rem;
}

.case-detail .main .info .bottom .button-wrap {
  margin-right: 0.18rem;
}

.case-detail .main .info .bottom .button-wrap:nth-of-type(2) .btn {
  font-weight: 700;
  background-color: #fff;
  border: 0.01rem solid #dd292c;
  color: #000;
  text-shadow: none;
}

.case-detail .else {
  padding: 0 0.3rem;
  background: #f4f4f4;
  overflow: hidden;
}

.case-detail .else h4 {
  font-size: 0.56rem;
  color: #000;
  line-height: 0.56rem;
  font-weight: 700;
  margin: 0.99rem 0 0.96rem;
}

.case-detail .else .cases {
  margin-bottom: 0.9rem;
}

.case-detail .else .cases ul li .content .bottom {
  margin-top: 0.45rem;
  border-top: 0.02rem solid #e7e7e7;
  padding-top: 0.35rem;
}

.case-detail .else .more {
  box-sizing: border-box;
  height: 0.78rem;
  border: 0.02rem solid #dd292c;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.24rem;
  color: #000;
  line-height: 0.24rem;
  margin-bottom: 0.5rem;
  margin-top: 1.1rem;
  cursor: pointer;
  font-weight: 700;
}

.case-detail .else .more i {
  display: inline-block;
  width: 0.25rem;
  height: 0.2rem;
  background: url();
  background-size: 100% 100%;
  margin-right: 0.1rem;
}
</style>
  